<template>
  <div class="Details" v-loading="loading">
    <h3>
      <div><span class="tag"></span> 基本信息</div>
    </h3>
    　　　
    <table bgcolor="#ebebeb" cellspacing="1" width="100%">
      　　　　　　　　　　
      <tr bgcolor="white">
        　　　　
        <td bgcolor="#fafafa" width="13%" height="150" rowspan="2" class="td">
          <i class="el-icon-picture-outline"></i>
          头像
        </td>
        　　　　
        <td align="center" rowspan="2" width="20%">
          <el-image
            style="width: 100px; height: 100px"
            :src="info.avatar"
            :preview-src-list="[info.avatar]"
            fit="cover"
          >
          </el-image>
        </td>
        　　　　
        <td bgcolor="#fafafa" width="13%" class="td">
          <i class="el-icon-warning-outline"></i>
          用户ID
        </td>
        　　　　
        <td width="20%" style="padding: 0 10px">
          <el-input v-model="info.id" disabled></el-input>
        </td>
        　　　　
        <td bgcolor="#fafafa" width="13%" class="td">
          <i class="el-icon-male"></i>
          性别
        </td>
        　　　　
        <td width="20%" style="padding: 0 10px">
          <el-radio-group v-model="info.sex">
            <el-radio disabled label="1">男</el-radio>
            <el-radio disabled label="2">女</el-radio>
          </el-radio-group>
        </td>

        　
      </tr>
      　
      <tr bgcolor="white">
        <td bgcolor="#fafafa" width="13%" class="td">
          <i class="el-icon-edit"></i>
          用户昵称
        </td>
        　　　　
        <td width="20%" style="padding: 0 10px">
          <el-input v-model="info.nickname" disabled></el-input>
        </td>
        <td bgcolor="#fafafa" width="13%" class="td">
          <i class="el-icon-cpu"></i>
          版本
        </td>
        　　　　
        <td width="20%" style="padding: 0 10px">
          <el-input v-model="info.version" disabled></el-input>
        </td>
        　　　　 　　　　 　
      </tr>
      　
      <tr height="70" bgcolor="white">
        <!----行-->
        　　　　
        <td bgcolor="#fafafa" width="13%" class="td">
          <i class="el-icon-mobile"></i>
          绑定手机
        </td>
        　　　　
        <td width="20%" style="padding: 0 10px">
          <el-input v-model="info.mobile" disabled></el-input>
        </td>
        　　　　
        <td bgcolor="#fafafa" width="13%" class="td">
          <i class="el-icon-user"></i>
          用户角色
        </td>
        　　　　
        <td width="20%" style="padding: 0 10px">
          <el-input v-model="info.roleName" disabled></el-input>
        </td>
        　　　　
        <td bgcolor="#fafafa" width="13%" class="td">
          <i class="el-icon-mobile-phone"></i>
          系统
        </td>
        　　　　
        <td width="20%" style="padding: 0 10px">
          <el-input disabled v-model="info.platform"></el-input>
        </td>
        　　　　
      </tr>
      <tr height="70" bgcolor="white">
        <!----行-->
        　　　　
        <td bgcolor="#fafafa" width="13%" class="td">
          <i class="el-icon-time"></i>
          注册时间
        </td>
        　　　　
        <td width="20%" style="padding: 0 10px">
          <el-input disabled v-model="info.regTime"></el-input>
        </td>
        　　　　
        <td bgcolor="#fafafa" width="13%" class="td">
          <i class="el-icon-time"></i>
          最后登陆时间
        </td>
        　　　　
        <td width="20%" style="padding: 0 10px">
          <el-input v-model="info.loginDate" disabled></el-input>
        </td>
        　　　　
        <td bgcolor="#fafafa" width="13%" class="td">
          <i class="el-icon-location-information"></i>
          最后登陆IP
        </td>
        　　　　
        <td width="20%" style="padding: 0 10px">
          <el-input v-model="info.clientIp" disabled></el-input>
        </td>
        　　　　
      </tr>
      <tr height="70" bgcolor="white">
        <!----行-->
        　　　　
        <td bgcolor="#fafafa" width="13%" class="td">
          <i class="el-icon-sold-out"></i>
          渠道
        </td>
        　　　　
        <td width="20%" style="padding: 0 10px">
          <el-input v-model="info.channel" disabled></el-input>
        </td>
        　　　　
        <td bgcolor="#fafafa" width="13%" class="td">
          <i class="el-icon-star-off"></i>
          等级
        </td>
        　　　　
        <td width="20%" style="padding: 0 10px">
          <el-input v-model="info.level" disabled></el-input>
        </td>
        　　　　
        <td bgcolor="#fafafa" width="13%" class="td"></td>
        　　　　
        <td width="20%" style="padding: 0 10px"></td>
        　　　　
      </tr>
    </table>
    <!-- 实名信息 -->
    <div style="margin-top: 20px">
      <h3>
        <div><span class="tag"></span> 实名信息</div>
        <el-button type="info" size="small" @click="removeBinding" plain
          >解除绑定</el-button
        >
      </h3>
      　　　
      <table bgcolor="#ebebeb" cellspacing="1" width="100%">
        　　　　　　　　　　 　
        <tr height="70" bgcolor="white">
          <!----行-->
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-postcard"></i>
            是否实名
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="info.realInfo.status" disabled></el-input>
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-date"></i>
            出生年月日
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="info.realInfo.birthday" disabled></el-input>
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-edit-outline"></i>
            实名认证年龄
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="info.realInfo.age" disabled></el-input>
          </td>
          　　　　
        </tr>
        <tr height="70" bgcolor="white">
          <!----行-->
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-postcard"></i>
            证件号码
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="info.realInfo.idNumber" disabled></el-input>
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-view"></i>
            真实姓名
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="info.realInfo.realName" disabled></el-input>
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-date"></i>
            认证日期
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="info.realInfo.realDate" disabled></el-input>
          </td>
          　　　　
        </tr>
      </table>
    </div>
    <!-- 主播信息 -->
    <div style="margin-top: 20px">
      <h3>
        <div><span class="tag"></span> 主播信息</div>
        <el-button type="info" size="small" @click="removeAnchor" plain
          >主播解约</el-button
        >
      </h3>
      　　　
      <table bgcolor="#ebebeb" cellspacing="1" width="100%">
        　　　　　　　　　　 　
        <tr height="70" bgcolor="white">
          <!----行-->
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-mic"></i>
            是否为主播
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="info.anchorInfo.isAnchor" disabled></el-input>
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-date"></i>
            成为主播时间
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="info.anchorInfo.bindDate" disabled></el-input>
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-magic-stick"></i>
            粉丝数量
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="info.anchorInfo.fansNum" disabled></el-input>
          </td>
          　　　　
        </tr>
        <tr height="70" bgcolor="white">
          <!----行-->
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-coin"></i>
            直播收益
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="info.anchorInfo.profit" disabled></el-input>
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td"></td>
          　　　　
          <td width="20%" style="padding: 0 10px"></td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td"></td>
          　　　　
          <td width="20%" style="padding: 0 10px"></td>
          　　　　
        </tr>
      </table>
    </div>
    <!-- 资产记录 -->
    <div style="margin-top: 20px">
      <h3>
        <div><span class="tag"></span> 资产信息</div>
      </h3>
      　　　
      <table bgcolor="#ebebeb" cellspacing="1" width="100%">
        　　　　　　　　　　 　
        <tr height="70" bgcolor="white">
          <!----行-->
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-coin"></i>
            金币数量
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input
              v-model="info.balanceInfo.gold"
              style="width: 60%"
              disabled
            ></el-input>
            <el-button type="info" size="small" @click="water(1)" plain
              >金币流水</el-button
            >
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-trophy"></i>
            积分数量
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input
              v-model="info.balanceInfo.integral"
              style="width: 60%"
              disabled
            ></el-input>
            <el-button type="info" size="small" @click="water(2)" plain
              >积分流水</el-button
            >
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-shopping-bag-1"></i>
            提现收益
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input
              v-model="info.balanceInfo.withdraw"
              style="width: 60%"
              disabled
            ></el-input>
            <el-button type="info" size="small" @click="water(3)" plain
              >提现收益</el-button
            >
          </td>
          　　　　
        </tr>
      </table>
    </div>
    <!-- 绑定信息 -->
    <div style="margin-top: 20px">
      <h3>
        <div><span class="tag"></span> 第三方账号</div>
      </h3>
      　　　
      <table bgcolor="#ebebeb" cellspacing="1" width="100%">
        　　　　　　　　　　 　
        <tr height="70" bgcolor="white">
          <!----行-->
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-pear"></i>
            QQ
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input
              v-model="info.third.qq"
              style="width: 60%"
              disabled
            ></el-input>
            <!-- <el-button type="info" size="small" @click="unbundling(1)" plain
              >解绑</el-button
            > -->
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-chat-dot-round"></i>
            微信
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input
              v-model="info.third.wx"
              style="width: 60%"
              disabled
            ></el-input>
            <!-- <el-button type="info" size="small" @click="unbundling(2)" plain
              >解绑</el-button
            > -->
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td"></td>
          　　　　
          <td width="20%" style="padding: 0 10px"></td>
          　　　　
        </tr>
      </table>
    </div>
    <!-- 账号状态 -->
    <div style="margin-top: 20px">
      <h3>
        <div><span class="tag"></span> 账号状态</div>
      </h3>
      　　　
      <table bgcolor="#ebebeb" cellspacing="1" width="100%">
        　　　　　　　　　　 　
        <tr
          height="70"
          v-if="info.userState.status != '已禁封'"
          bgcolor="white"
        >
          <!----行-->
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-lock"></i>
            状态
          </td>
          　　　　
          <td colspan="5" style="padding: 0 10px">
            <el-input
              v-model="info.userState.status"
              style="width: 15%"
              disabled
            ></el-input>
            <el-button
              type="warning"
              v-if="info.userState.status != '已注销'"
              size="small"
              @click="banUser('5')"
              plain
              >禁封账号</el-button
            >
            <el-button
              type="danger"
              v-if="info.userState.status != '已注销'"
              size="small"
              @click="logout"
              plain
              >注销账号</el-button
            >
          </td>
          　　　　 　　　　
        </tr>
        <tr height="70" v-else bgcolor="white">
          <!----行-->
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-lock"></i>
            状态
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input
              v-model="info.userState.status"
              style="width: 60%"
              disabled
            ></el-input>
            <el-button type="info" size="small" @click="unBand('5')" plain
              >立即解封</el-button
            >
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-date"></i>
            解封时间
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="info.userState.endTime" disabled></el-input>
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-document"></i>
            禁封原因
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="info.userState.reason" disabled></el-input>
          </td>
          　　　　
        </tr>
      </table>
    </div>
    <!-- 直播状态 -->
    <div style="margin-top: 20px">
      <h3>
        <div><span class="tag"></span> 直播状态</div>
      </h3>
      　　　
      <table bgcolor="#ebebeb" cellspacing="1" width="100%">
        　　　　　　　　　　 　
        <tr
          height="70"
          v-if="info.anchorState.status == '正常'"
          bgcolor="white"
        >
          <!----行-->
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-lock"></i>
            状态
          </td>
          　　　　
          <td colspan="5" style="padding: 0 10px">
            <el-input
              v-model="info.anchorState.status"
              style="width: 15%"
              disabled
            ></el-input>
            <el-button type="warning" size="small" @click="banUser('10')" plain
              >禁封直播</el-button
            >
          </td>
          　　　　 　　　　
        </tr>
        <tr height="70" v-else bgcolor="white">
          <!----行-->
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-lock"></i>
            状态
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input
              v-model="info.anchorState.status"
              style="width: 60%"
              disabled
            ></el-input>
            <el-button type="info" size="small" @click="unBand('10')" plain
              >立即解封</el-button
            >
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-date"></i>
            解封时间
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="info.anchorState.endTime" disabled></el-input>
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-document"></i>
            禁封原因
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="info.anchorState.reason" disabled></el-input>
          </td>
          　　　　
        </tr>
      </table>
    </div>
    <!-- 提现状态 -->
    <div style="margin-top: 20px">
      <h3>
        <div><span class="tag"></span> 提现状态</div>
      </h3>
      　　　
      <table bgcolor="#ebebeb" cellspacing="1" width="100%">
        　　　　　　　　　　 　
        <tr
          height="70"
          v-if="info.withdrawState.status == '正常'"
          bgcolor="white"
        >
          <!----行-->
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-lock"></i>
            状态
          </td>
          　　　　
          <td colspan="5" style="padding: 0 10px">
            <el-input
              v-model="info.withdrawState.status"
              style="width: 15%"
              disabled
            ></el-input>
            <el-button type="warning" size="small" @click="banUser('15')" plain
              >禁封提现</el-button
            >
          </td>
          　　　　 　　　　
        </tr>
        <tr height="70" v-else bgcolor="white">
          <!----行-->
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-lock"></i>
            状态
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input
              v-model="info.withdrawState.status"
              style="width: 60%"
              disabled
            ></el-input>
            <el-button type="info" size="small" @click="unBand('15')" plain
              >立即解封</el-button
            >
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-date"></i>
            解封时间
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="info.withdrawState.endTime" disabled></el-input>
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-document"></i>
            禁封原因
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="info.withdrawState.reason" disabled></el-input>
          </td>
          　　　　
        </tr>
      </table>
    </div>
    <!-- 充值状态 -->
    <div style="margin-top: 20px">
      <h3>
        <div><span class="tag"></span> 充值状态</div>
      </h3>
      　　　
      <table bgcolor="#ebebeb" cellspacing="1" width="100%">
        　　　　　　　　　　 　
        <tr
          height="70"
          v-if="info.rechargeState.status == '正常'"
          bgcolor="white"
        >
          <!----行-->
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-lock"></i>
            状态
          </td>
          　　　　
          <td colspan="5" style="padding: 0 10px">
            <el-input
              v-model="info.rechargeState.status"
              style="width: 15%"
              disabled
            ></el-input>
            <el-button type="warning" size="small" @click="banUser('20')" plain
              >禁封充值</el-button
            >
          </td>
          　　　　 　　　　
        </tr>
        <tr height="70" v-else bgcolor="white">
          <!----行-->
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-lock"></i>
            状态
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input
              v-model="info.rechargeState.status"
              style="width: 60%"
              disabled
            ></el-input>
            <el-button type="info" size="small" @click="unBand('20')" plain
              >立即解封</el-button
            >
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-date"></i>
            解封时间
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="info.rechargeState.endTime" disabled></el-input>
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-document"></i>
            禁封原因
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="info.rechargeState.reason" disabled></el-input>
          </td>
          　　　　
        </tr>
      </table>
    </div>
    <!-- 以下弹窗 -->
    <!-- 主播解约弹窗 -->
    <el-dialog title="主播解约" :visible.sync="anchorShow" width="30%" center>
      <el-form label-position="right" label-width="80px" :model="anchorForm">
        <el-form-item label="解约理由">
          <el-radio-group
            v-model="anchorForm.type"
            @change="anchorForm.reason = anchorForm.type"
          >
            <el-radio label="合约到期">合约到期</el-radio>
            <el-radio label="多次违规">多次违规</el-radio>
            <el-radio label="">手动输入</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="">
          <el-input
            v-show="anchorForm.type == ''"
            v-model="anchorForm.reason"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="anchorShow = false">取 消</el-button>
        <el-button type="primary" @click="anchorUnBind">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 流水弹框 -->
    <el-dialog
      destroy-on-close
      :title="waterTitle"
      :visible.sync="waterShow"
      width="50%"
      center
    >
      <GoldWater :id="info.id" v-if="waterType == 1"></GoldWater>
      <IntegralWater :id="info.id" v-if="waterType == 2"></IntegralWater>
      <WithdrawalWater :id="info.id" v-if="waterType == 3"></WithdrawalWater>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" class="btn" @click="waterShow = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
    <!-- 禁封弹窗 -->
    <el-dialog title="禁封" :visible.sync="banShow" width="40%" center>
      <el-form label-position="right" label-width="100px" :model="anchorForm">
        <el-form-item label="禁封类型">
          <el-radio-group v-model="banForm.type">
            <el-radio disabled label="5">禁封账号</el-radio>
            <el-radio disabled label="10">禁封直播</el-radio>
            <el-radio disabled label="20">禁封充值</el-radio>
            <el-radio disabled label="15">禁封提现</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="禁封理由">
          <el-radio-group
            v-if="banForm.type == 5 || banForm.type == 10"
            v-model="banForm.reason1"
            @change="banForm.reason = banForm.reason1"
          >
            <el-radio
              v-for="(item, index) in banReasonOption"
              :key="index"
              :label="item.label"
              >{{ item.txt }}</el-radio
            >
          </el-radio-group>
          <el-radio-group
            v-else
            v-model="banForm.reason2"
            @change="banForm.reason = banForm.reason2"
          >
            <el-radio
              v-for="(item, index) in banReasonOption1"
              :key="index"
              :label="item.label"
              >{{ item.txt }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-show="banForm.reason2 == '' || banForm.reason1 == ''"
          label="手动输入理由"
        >
          <el-input v-model="banForm.reason"></el-input>
        </el-form-item>
        <el-form-item label="禁封天数">
          <el-radio-group v-model="banForm.banTime">
            <el-radio
              v-for="(item, index) in banTimeOption"
              :key="index"
              :label="item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="banShow = false">取 消</el-button>
        <el-button type="primary" @click="banSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import GoldWater from "./GoldWater";
import IntegralWater from "./IntegralWater";
import WithdrawalWater from "./WithdrawalWater.vue";
import {
  userQueryUserDetail,
  userBanUser,
  userUnBanUser,
  userLogOut,
  userUnBindUserRealName,
  anchorUnBind,
} from "@/api/UserManagement";
export default {
  components: { GoldWater, IntegralWater, WithdrawalWater },
  props: ["id"],
  data() {
    return {
      // id: "",
      loading: false,
      sex: 1,
      info: {
        avatar: "",
        id: "",
        sex: "",
        nickname: "",
        version: "",
        mobile: "",
        roleName: "",
        platform: "",
        regTime: "",
        loginDate: "",
        clientIp: "",
        channel: "",
        level: "",
        realInfo: {
          status: "", //1yi2wei
          birthday: "",
          age: "",
          idNumber: "",
          realName: "",
          realDate: "", //实名时间
        },
        anchorInfo: {
          isAnchor: "",
          bindDate: "",
          fansNum: "",
          profit: "",
        },
        balanceInfo: {
          gold: "",
          integral: "",
          withdraw: "",
        },
        third: {
          qq: "",
          wx: "",
        },
        userState: {
          status: "",
          endTime: "",
          reason: "",
        },
        anchorState: {
          status: "",
          endTime: "",
          reason: "",
        },
        withdrawState: {
          status: "",
          endTime: "",
          reason: "",
        },
        rechargeState: {
          status: "",
          endTime: "",
          reason: "",
        },
      },
      //弹窗控制开关
      anchorShow: false,
      waterShow: false,
      waterTitle: "",
      waterType: null,
      banShow: false,
      //弹窗表单
      anchorForm: {
        type: 1,
        reason: "",
      },
      banForm: {
        type: "",
        reason: "",
        reason1: "1",
        reason2: "1",
        banTime: "",
      },
      banReasonOption: [
        { label: "裸露身体", txt: "裸露身体" },
        { label: "内容低俗", txt: "内容低俗" },
        { label: "涉嫌危害生命", txt: "涉嫌危害生命" },
        { label: "侮辱谩骂", txt: "侮辱谩骂" },
        { label: "血腥暴力", txt: "血腥暴力" },
        { label: "危害国家安全", txt: "危害国家安全" },
        { label: "", txt: "手动输入理由" },
      ],
      banReasonOption1: [
        { label: "利用BUG", txt: "利用BUG" },
        { label: "非法刷单", txt: "非法刷单" },
        { label: "诈骗犯罪", txt: "诈骗犯罪" },
        { label: "疑似未成年", txt: "疑似未成年" },
        { label: "", txt: "手动输入理由" },
      ],
      banTimeOption: [
        { label: "1天", value: "1" },
        { label: "3天", value: "3" },
        { label: "7天", value: "7" },
        { label: "15天", value: "15" },
        { label: "30天", value: "30" },
        { label: "永久", value: "0" },
      ],
    };
  },
  methods: {
    async search() {
      this.loading = true;
      const res = await userQueryUserDetail({
        userId: this.id,
      });
      this.loading = false;
      if (res.code == 0) {
        this.info.avatar = res.data.avatar;
        this.info.id = res.data.userId;
        this.info.sex = res.data.sex;
        this.info.nickname = res.data.nickname;
        this.info.version = res.data.version;
        this.info.mobile = res.data.mobile;
        this.info.loginDate = res.data.loginDate;
        this.info.clientIp = res.data.clientIp;
        this.info.channel = res.data.channel;
        this.info.level = res.data.level;
        this.info.regTime = res.data.regTime;
        this.info.platform = res.data.platform;
        this.info.roleName = res.data.roleName;
        //实名信息
        this.info.realInfo.status =
          res.data.realInfo.status == 1 ? "已认证" : "未认证";
        this.info.realInfo.birthday = res.data.realInfo.birthday;
        this.info.realInfo.age = res.data.realInfo.age;
        this.info.realInfo.idNumber = res.data.realInfo.idNumber;
        this.info.realInfo.realName = res.data.realInfo.realName;
        this.info.realInfo.realDate = res.data.realInfo.realDate;
        //主播信息
        this.info.anchorInfo.isAnchor =
          res.data.anchorInfo.isAnchor == 1 ? "是" : "否";
        this.info.anchorInfo.bindDate = res.data.anchorInfo.bindDate;
        this.info.anchorInfo.fansNum = res.data.anchorInfo.fansNum;
        this.info.anchorInfo.profit = res.data.anchorInfo.profit;
        //钱包信息
        this.info.balanceInfo = res.data.balanceInfo;
        this.info.third = res.data.third;
        //用户状态
        // this.info.userState = res.data.userState
        //已注销
        if (res.data.userState.logout.state == 0) {
          this.info.userState.status = "已注销";
        } else if (res.data.userState.account.state == 1) {
          this.info.userState.status = "正常";
        } else if (res.data.userState.account.state == 0) {
          this.info.userState.status = "已禁封";
          this.info.userState.endTime = res.data.userState.account.endTime;
          this.info.userState.reason = res.data.userState.account.reason;
        }
        //主播状态
        if (res.data.userState.anchor.state == 0) {
          this.info.anchorState.status = "已禁封";
          this.info.anchorState.endTime = res.data.userState.anchor.endTime;
          this.info.anchorState.reason = res.data.userState.anchor.reason;
        } else if (res.data.userState.anchor.state == 1) {
          this.info.anchorState.status = "正常";
        }
        //提现状态
        if (res.data.userState.withdraw.state == 0) {
          this.info.withdrawState.status = "已禁封";
          this.info.withdrawState.endTime = res.data.userState.withdraw.endTime;
          this.info.withdrawState.reason = res.data.userState.withdraw.reason;
        } else if (res.data.userState.withdraw.state == 1) {
          this.info.withdrawState.status = "正常";
        }
        //充值状态
        if (res.data.userState.recharge.state == 0) {
          this.info.rechargeState.status = "已禁封";
          this.info.rechargeState.endTime = res.data.userState.recharge.endTime;
          this.info.rechargeState.reason = res.data.userState.recharge.reason;
        } else if (res.data.userState.recharge.state == 1) {
          this.info.rechargeState.status = "正常";
        }
      }
    },
    async banSubmit() {
      const res = await userBanUser({
        userId: this.info.id,
        type: this.banForm.type,
        reason: this.banForm.reason,
        banDays: this.banForm.banTime,
      });
      if (res.code == 0) {
        this.$message.success("操作成功！");
        this.search();
        this.banShow = false;
      }
    },
    //立即解封
    async unBand(type) {
      const res = await userUnBanUser({
        userId: this.info.id,
        type,
      });
      if (res.code == 0) {
        this.$message.success("操作成！");
        this.search();
      }
    },
    //解除绑定
    removeBinding() {
      this.$confirm("是否解除该用户实名信息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await userUnBindUserRealName({
            userId: this.info.id,
          });
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "解除成功!",
            });
            this.search();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消解除",
          });
        });
    },
    //主播解约
    removeAnchor() {
      this.anchorShow = true;
    },
    async anchorUnBind() {
      const res = await anchorUnBind({
        userId: this.info.id,
        reason: this.anchorForm.reason,
      });
      if (res.code == 0) {
        this.$message.success("解约成功！");
        this.search();
        this.anchorShow = false;
      }
    },
    //流水弹框
    water(type) {
      if (type == 1) {
        this.waterTitle = "金币流水";
        this.waterType = 1;
        this.waterShow = true;
      }
      if (type == 2) {
        this.waterTitle = "积分流水";
        this.waterType = 2;
        this.waterShow = true;
      }
      if (type == 3) {
        this.waterTitle = "提现收益";
        this.waterType = 3;
        this.waterShow = true;
      }
    },
    //解绑第三方
    unbundling(type) {
      let msg = type == 1 ? "QQ" : "微信";
      this.$confirm(`是否解绑该用户${msg}信息?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "解绑成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消解绑",
          });
        });
    },
    //禁封
    banUser(type) {
      this.banShow = true;
      this.banForm.type = type;
    },
    //注销
    logout() {
      this.$confirm(`是否注销该用户信息?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await userLogOut({
            userId: this.info.id,
          });
          if (res.code == 0) {
            this.$message.success("注销成功!");
            this.search();
          }
          // this.$message({
          //   type: "success",
          //   message: "注销成功!",
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消注销",
          });
        });
    },
  },
};
</script>

<style lang="less" scoped>
.Details {
  h3 {
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    div {
      display: flex;
      align-items: center;
      .tag {
        display: inline-block;
        width: 5px;
        height: 18px;
        background-color: #7b94d8;
        margin-right: 10px;
      }
    }
  }
  table,
  table tr th,
  table tr td {
    border: 1px solid #ebebeb;
  }
  table {
    border-collapse: collapse;
  }
  .td {
    color: #909399;
    padding-left: 10px;
  }
}
</style>